<template>
	<div class="zBox">
		<div class="top">
			<el-form class="xHeight" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
				<el-form-item label="姓名" prop="name"><el-input v-model="queryParams.name" placeholder="请输入" maxlength="30" /></el-form-item>
				<el-form-item label="时间" prop="time">
					<el-date-picker
						v-model="dateRange"
						type="daterange"
						range-separator="-"
						value-format="YYYY-MM-DD"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<div class="cz" @click="reset">重置</div>
					<div class="cx" @click="getList">查询</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bottom">
			<el-table class="qjTable" v-loading="loading" :data="tableList" height="620" stripe>
				<el-table-column prop="createBy" label="姓名" align="center"></el-table-column>
				<el-table-column prop="projectName" label="加班项目" align="center"></el-table-column>
				<el-table-column prop="workHour" label="加班时长" align="center"></el-table-column>
				<el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
				<el-table-column label="操 作" align="center" class-name="small-padding">
					<template #default="scope">
						<el-button plain type="danger" size="mini" @click="detail(scope.row.overworkId)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination class="pagination" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<el-dialog class="overDialog" v-model="detailDialogVisible" title="加班信息" top="12vh" width="45%">
			<table class="mailTable">
				<tr>
					<td class="column ">姓名</td>
					<td class="nrkd">{{ workDetail.createBy }}</td>
					<td class="column ">所属项目</td>
					<td class="nrkd">{{ workDetail.projectName }}</td>
				</tr>
				<tr>
					<td class="column">提交时间</td>
					<td class="nrkd">{{ workDetail.createTime }}</td>
					<td class="column ">加班时长</td>
					<td class="nrkd">{{ workDetail.workHour }}小时</td>
				</tr>
				<tr>
					<td class="column">开始时间</td>
					<td class="nrkd">{{ workDetail.startTime }}</td>
					<td class="column ">结束时间</td>
					<td class="nrkd">{{ workDetail.endTime }}</td>
				</tr>
				<tr>
					<td class="column ">抄送人</td>
					<td class="nrkd">{{ workDetail.copyNames }}</td>
					<td class="column ">加班事由</td>
					<td class="nrkd">{{ workDetail.reason }}</td>
				</tr>
				<tr>
					<td class="column">打卡记录</td>
					<td class="nrkd li2Height " colspan="3">
						<div class="dkJl">
							<div v-if="attendanceRecordList && attendanceRecordList.length > 0" class="red" v-for="(item, index) in attendanceRecordList">
								{{ '打卡时间' + (index + 1) + ':' + '\xa0\xa0\xa0' + item.userCheckTime }}
							</div>
							<div v-else id="">暂无记录</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="column">审核进度</td>
					<td class="nrkd lineHeight" colspan="3">
						<p class="jdbox" style="display: flex;" v-for="(item, index) in auditList">
							<span class="spzt" :class="{ ytg: item.status == 2, btg: item.status == 1, dsh: item.status == 0 }"></span>
							<span class="xuLine" style="position: absolute;width: 2px;height: 20px;border: 1px dashed #ccc;"></span>
							<span>{{ item.createBy + '\xa0\xa0\xa0' + (item.status == 0 ? '待审核' : item.updateTime) + '\xa0\xa0\xa0' + (item.reason ? item.reason : '') }}</span>
						</p>
					</td>
				</tr>
			</table>
		</el-dialog>
		<!-- 加班申请弹框 -->
	</div>
</template>

<script setup>
import { getOverworkList, getOverWorkDetail, getAuditList } from '@/api/hkd';
import useUserStore from '@/store/modules/user';
const loading = ref(true);
const detailDialogVisible = ref(false);
const tableList = ref([]);
const dateRange = ref([]);
const workDetail = ref({});
const attendanceRecordList = ref([]);
const auditList = ref([]);
const total = ref(0);
const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		name: '',
		type: 'copy'
	}
});
const qjzt = ref({
	0: { color: '#FA6400', label: '待审核', img: 'dsh' },
	1: { color: '#BE1A21', label: '未通过', img: 'btg' },
	2: { color: '#1AC45F', label: '通过', img: 'ok' }
});

const { queryParams } = toRefs(data);
onMounted(() => {});

function getList() {
	loading.value = true;
	queryParams.value.startTime = dateRange.value[0];
	queryParams.value.endTime = dateRange.value[1];
	getOverworkList(queryParams.value).then(response => {
		tableList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}
function reset() {
	dateRange.value = [];
	queryParams.value.name = '';
	getList();
}
function detail(overworkId) {
	detailDialogVisible.value = true;
	getOverWorkDetail({ overworkId: overworkId }).then(res => {
		if (res.code == 200) {
			workDetail.value = res.data;
		} else {
			ElMessage({
				type: 'warning',
				message: res.errmsg
			});
		}
	});

	getAuditList({ overworkId: overworkId }).then(res => {
		auditList.value = res.data.auditList;
		attendanceRecordList.value = res.data.attendanceRecordList;
	});
}

getList();
</script>

<style lang="scss" scoped>
.qjButtonBox {
	padding: 20px 30px;
}
.qjBut {
	background: #be1a21;
	color: #ffffff;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	padding: 10px 0;
	font-size: 0.875rem;
	cursor: pointer;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
:deep(.el-form) {
	.left {
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}
.userOption {
	display: flex;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;

	img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	span {
		padding: 0 1rem;
	}
}
.sxm {
	margin-top: 20px;
}
.spBox,
.spBox2 {
	display: flex;
	flex-flow: column;

	p {
		margin-top: 0;
	}
	img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
}
.spBox2 {
	margin-right: 20px;
}
:deep(.left) {
	width: 50%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
}
:deep(.right) {
	margin-left: 50px;
	width: 42%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	.spr,
	.csr {
		margin-bottom: 10px;
		.el-form-item__label {
			width: 70px !important;
		}
	}
}
.csrBox {
	margin-top: 20px;
	display: flex;
	max-height: 235px;
	overflow: auto;
	display: flex;
	flex-flow: wrap;
}
.csrBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
:deep(.qjTable) {
	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f7f7f7 !important;
			color: #515a6e;
			height: 58px !important;
			font-size: 13px;
			border: none !important;
		}
	}
	.el-table__body-wrapper {
		.el-button [class*='el-icon-'] + span {
			margin-left: 1px;
		}
		.el-table__row {
			td {
				border: none !important;
				height: 55px;
				cursor: pointer;
			}
		}
	}
}
.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
}
.czan {
	display: flex;
	justify-content: center;
}
#printDivdyAll {
	margin-top: -23px;
	width: 1000px;
	height: 400px;
	padding: 5px;

	td {
		text-align: center;
		font-size: 18px;
	}

	.zhai {
		height: 60px;
	}

	.shense {
		font-size: 20px;
	}

	table {
		width: 100%;
		height: 100%;
	}
}
.zBox {
	height: 100%;
}
:deep(.shbj) {
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
.sptop {
	margin-top: 20px;
}
:deep(.bz) {
	.el-form-item__label {
		width: 50px !important;
	}
}
.red {
	color: #ff0000;
}
.spzt {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	margin-right: 10px;
}
.jdbox {
	position: relative;
}
.jdbox:last-child .xuLine {
	display: none;
}
.xuLine {
	position: absolute;
	width: 1px;
	height: 17px;
	border-left: 2px dashed rgb(204, 204, 204);
	left: 9px;
	top: 20px;
}
.top {
	background: #ffffff;
	padding: 20px 20px 2px 20px;
	border-radius: 10px;
}
:deep(.bottom) {
	padding: 20px;
	background: #ffffff;
	border-radius: 0.625rem;
	height: 87.5%;
	margin-top: 20px;
	.pagination {
		.el-pagination {
			display: flex;
			width: 100%;
			justify-content: center;
		}
	}
}
:deep(.xHeight) {
	.el-form-item__label {
		height: 40px;
		line-height: 40px;
	}
}
.pst {
	position: absolute;
	right: 36px;
	padding: 6px;
}
.ytg {
	background: url(../../assets/images/mainImg/ok.png);
	background-size: 100% 100%;
}
.dsh {
	background: url(../../assets/images/mainImg/dsh.png);
	background-size: 100% 100%;
}
.btg {
	background: url(../../assets/images/mainImg/btg.png);
	background-size: 100% 100%;
}
.li2Height {
	line-height: 30px;
}
</style>
